<template>
    <el-dialog title="选择岗位"  width="1000px" :visible="true" @close="cancel()" append-to-body> 
        <div>
            <div class="choiceList">
                <div>
                    <el-tag
                        v-for="tag in tags"
                        :key="tag.id"
                        @close="handleClose(tag)"
                        closable>
                        {{tag.name}}
                    </el-tag>
                </div>
            </div>
            <div class="treeContent">
                <!--岗位数据-->
                <el-col :span="24" :xs="24">
                     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                        <el-form-item label="岗位编码" prop="code">
                            <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
                        </el-form-item>
                        <el-form-item label="岗位名称" prop="name">
                            <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                     <el-table :reserve-selection="true" v-loading="loading" :data="postList" @select="select"  row-key="id" :ref="multiple? 'multipleTable':'singleTable'">
                        <el-table-column label='' width="55" v-if="!multiple" column-key="redioKey">
                         <template slot-scope="scope">
                            <el-radio
                                :label="scope.row.id"
                                v-model="singleCheckKey"
                                @change.native="getCurrentRow(scope.row)"
                                style="color: #fff; padding-left: 10px; margin-right: -25px"
                            >{{""}}</el-radio>
                         </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55" v-if="multiple" column-key="selectKey"></el-table-column>
                        <el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
                        <el-table-column label="岗位编码" align="center" prop="code" />
                        <el-table-column label="岗位名称" align="center" prop="name" />
                        <el-table-column label="状态" align="center" prop="status">
                            <template slot-scope="scope">
                            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
                            </template>
                        </el-table-column>
                    </el-table>


                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
                </el-col>
            </div>
            <div class="button">
                <el-button  @click="cancel">取消</el-button> 
                <el-button @click="clearUser">清空</el-button> 
                <el-button type="primary" @click="selectUser">选择</el-button> 
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { listPost } from "@/api/system/post";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";

export default {
    data() {
        return {
            openPost: false,
             // 总条数
            total: 0,
            tags: [],
            // 遮罩层
            loading: true,
             // 岗位表格数据
            postList: [],
             // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                name: undefined,
                code: undefined,
            },
            multipleSelection: [],
            singleCheckKey:''
        }
    },
    props: ['tagsList','multiple'],
    created() {
        this.getList();
    },
    methods: {
         /** 查询岗位列表 */
        getList() {
            this.loading = true;
             const _this = this
            listPost(this.queryParams).then(response => {
                 _this.postList = response.data.list;
                _this.total = response.data.total;
                _this.loading = false;
                if (_this.tagsList) {
                  _this.tags = _this.tagsList
                  this.$nextTick(() => {
                      _this.tagsList.forEach((tag) => {
                          _this.postList.forEach(user => {
                              if (user.id === tag.id) {
                                this.multiple? _this.$refs.multipleTable.toggleRowSelection(user, true):this.singleCheckKey=user.id
                              }
                          })
                      });
                  })
                }
            })
        },
         /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        select(selection,row) {
            this.tags= selection
            // const isTrue=this.tags.every(item=>item.id!==row.id)
            // if(isTrue) this.tags.push(row)
        },
         /**单选事件 */
        getCurrentRow(val){
          this.tags=[]
            setTimeout(()=>{
              this.tags=[val]
            },400)
        },
        clearUser() {
            this.tags = []
            this.multipleSelection = []
            this.multiple ? this.$refs.multipleTable.clearSelection():this.singleCheckKey='';
        },
        handleClose(tag) {
            const rows = this.tags.splice(this.tags.indexOf(tag), 1)
            if (rows) {
                rows.forEach(row => {
                    this.multiple ?this.$refs.multipleTable.toggleRowSelection(row):this.singleCheckKey='';
                });
            }
        },
        cancel() {
            this.clearUser()
            this.openPost = false
            this.$emit('closeDialog')
        },
        selectUser() {
            this.$emit( 'postInfo',this.tags )
            this.openPost = false
            this.cancel()
        }
    }
}
</script>

<style lang="scss" scoped>
    .choiceList{
        border: 1px dashed;
        height: 50px;
        padding: 10px 20px;
    }
    .choiceList .el-tag+.el-tag{
        margin-left: 10px;
    }
    .treeContent{
        display: flex;
        margin-top: 20px;
    }
    .button{
        text-align: right;
        margin-top: 20px;
    }
</style>